<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态动态注册</title>
    <script type="text/javascript">

        /*1、静态注册 onclick 事件*/
        function onclickFun(){
            alert("静态注册 onclick 事件");
        }

        //2、动态注册，onclick 事件 ；固定写法*/
        window.onload = function (){
            //1.获取标签对象
            var btnobj = document.getElementById("btn02");//docement是js提供的一个对象； getElementID用来通多 id 属性获取标签对象

            //2.通过标签对象.事件名 = function（）{}
            btnobj.onclick = function (){
                alert("这是动态注册 onclick 事件");
            }
        }

        /*3、静态注册 onblur 事件 */
        function onblurFun(){
            console.log("console是控制台对象，js提供，专门用来向浏览器的控制台打印输出，需要F12查看，静态 onblur 事件")
        }

        /*4、动态注册 onblur 事件*/
        window.onload = function (){
           var input02Obj = document.getElementById("input02");
           input02Obj.onblur = function (){
               console.log("动态注册失去焦点事件");
           }
        }

        /*5、静态注册之 form 事件*/
        function onsubmitFun(){
            alert("静态注册之 form 事件");
            return false;//false 阻止表单提交数据； true 表单提交数据
        }

        /*6、动态注册之 form 事件*/
        window.onload = function (){
            //1.获取标签对象
            var formObj =  document.getElementById("form02");
            //2.通过标签对象.事件名 = function（）{}
            formObj.onsubmit=function () {
                alert("动态注册之 form 事件");
                return true;//false 阻止表单提交数据； true 表单提交数据
            }
        }

    </script>
</head>
<body>
<h3>静态、动态注册之 onclick 事件</h3>
<!--静态注册 onclick 事件 ；按钮1  演示-->
    <button onclick="onclickFun()">按钮1</button>
<!--动态注册 onclick 事件 ；按钮2  演示-->
    <button id="btn02">按钮2</button><br/>
<hr/>
<h3>静态、动态注册之 onblur 事件</h3>
<!--静态注册 onblur 事件 ；输入1  演示-->
输入1：<input type="text" onblur="onblurFun();"><br/>
<!--动态注册 onblur 事件 ；输入2  演示-->
输入2：<input id="input02" type="text">
<hr/>
<h3>静态、动态注册之 form表单验证 事件</h3>
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="静态注册"/>
    </form>

    <form action="http://localhost:8080" method="get" id="form02">
        <input type="submit" value="动态注册"/>
    </form>

<hr/>


<hr/>

</body>
</html>